<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5_NewTags</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
			z-index: 9999;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
		}
		.example>nav>a{
			display: block;
			text-align: left;
			margin: 5px;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1 id='h-title'>第19节课：AJax文件上传-离线存储-worker多线程</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、AJax请求</h4>
			<p>
				1. 正常AJax请求数据
					①创建AJax对象
						a)  var xhr = new XMLHttpRequest( )
					②事件监听,状态值发生改变时触
						b)  xhr.onreadystatechange = function(){
							if ( xhr.readyState ==4 ){
								if( xhr.status ==200 ){
									alert( xhr.responseText )
								}	
							}
						}
					③ 请求方式
						c)  xhr.open( ‘方式’ , ‘地址’ , ‘是否异步’ )
					④ 发送请求
						d)  xhr.send()
						
				2. 在标准浏览器下，XMLHttpRequest已经升级了，可以支持很多的一些特性
					a)可以跨域，在同一服务器下访问不同的域，跟正常的AJax请求过程一样，但需要后端配合
					b)权限问题,后端请求头要允许你访问的域
						⑥  header(‘Access-Control-Allow-Origin:http://www.域名.com’)

				3. XMLHttpRequest增加了很多功能
				 	c)  规范不推荐使用 onreadystatechange 事件监听状态值，它推荐使用onload

				4. IE8+浏览器如果想实现跨域请求，则需要使用另外一个对象实现

					d) 创建对象 var xhr = new XDomainRequest( ) 过程跟之前一样
						[ https://msdn.microsoft.com/library/cc288060(v=vs.85).aspx ]
						[ https://xhr.spec.whatwg.org/ ]

				5. 同域下跨文档操作
					
					iframe内页：
				父页面操作子页面：contentWindow
					子页面操作父页面：window.top(找到最顶级的父页面)/parent(第一父页面)

				新窗口页：
					父页面操作子页面：window.open
					子页面操作父页面：window.opener

			</p>
			<h4>文件上传</h4>
			<p>
				5. 通过input的type=’file’上传
					① 通过表单控件file获取的是input的value值，这是字符串，不是上传的文件
					② 通过控件中的文件列表对象
						e) input.files获取是集合
						f) 我们的需求是通过AJax把input.files[0]数据发送到后端，但需要后端配合
						g) 通过控制台查看相关的属性和属性的值，可以通过for in循环
						h) 然后通过Ajax进行发送上传的文件
							var xhr = new XMLHttpRequest( )
							xhr.onload = function(){
								var data = JSON.parse( this.responseText );
								console.log( data.mag + ‘:::’+data.url );
								console.log( ‘上传完成’ )
							}
							console.log( xhr.upload )
							var oUpload = xhr.upload;
							console.log(  oUpload  )
							oUpload.onprogress = function(e){ // 监听上传的进度
								console.log( '当前进度' + e.loaded + ‘ ::: 总进度’+e.total )
								var scale = e.loaded / e.total; 通过比例实现真正的上传的进度 
								Box.style.width = scale * ( box.offsetWidth ) + ‘px’;
								box.innerHTML = scale *100 + ‘%’;
							}
							xhr.open(‘post’，’地址’,’异步’);
							xhr.setRequestHeader(‘X-Request-With’,’XMLHttpRequest’);
							//通过FormData构建提交数据
							var oFormData = new FormData(); 
							oFormData.append(‘file’,input.files[0]);
							Xhr.send( oFormData );

				<mark><a href="http://www.cnblogs.com/laden666666/p/6409868.html">基于Blod的ajax进度条下载实现</a></mark>
			</p>
			<h4>三、离线存储</h4>
			<p>
				6.离线应用是什么
					① 在地铁、地区、飞机上、一些场合下手机信号弱，可以没有网络，这个时候可以离线应用

					② 如何工作的

					a)原理就是 在有网络的时候，客户端第一次访问服务器，服务器收到请求后，会把所有的信息返回给客户，并且同时，也会发送到寄存器里面存储着，当突然没网络的时候，这时客户端请求不到服务器，就会去寄存器里面去找所需要的信息

				7.离线存储的好处

					a)没网的时候，可以正常访问

					b)快速响应请求的网页，不必用多个http请求占用带宽资源

					c)可以缓存任何文件，比如图片、css、js、html 的名称


				8. 服务器设置头信息

					①在apache目录下的httpd.conf文件里，(# Mutex default:logs下一行)
						a)加上AddType text/cache-manifest .manifest
					
					②Html标签上 manifest=“文件名.manifest”
					
					③ 创建一个后缀名为.manifest的文件
						a) 先写 CACHE MANIFEST 下面写 1.jpg index.css index.js index.html

						b) FALLBACK 上面的没有获取到，就在这个缓存找

						c) NETWORK 无论缓存中能不能获取到文件，都从网络上获取

				如果在你的电脑上 没有效果 那就是xampp安装包有问题，在真实的服务器里有效果
			</p>
			<h4>四、worker多线程</h4>
			<p>
					9. 多线程的原理
						①从火车站买票，如果只有一个售票窗口，很多人同时买票，这时就非常拥堵，耗时比较长，而且可能会发生安全事故，那么如果新开多个售票窗口，就能起到分流的效果，很快能买到票，不会发生异常情况
					10. 用法
						② 点击按钮创建多线程对象
						③ 发送数据
						④ 把比较复杂的运算放到多线性里面计算，然后把计算完的结果发送到前端页面
					11.具体流程
						a) 前端页面
				var w = new Worker(‘work.js’)   // 创建对象
				w.postMessage(‘发的数据’)   // 发送到 work.js文件里面
				W.onmessage = function(e){
					document.body.innerHTML = e.data  // e.data是work,js计算完成的结果
				}

						b) 多线程处理页面 work.js
							importScripts(‘其它work.js文件’);
							self.onmessage = function(e){ // self指向全局的worker对象
								console.log(e.data);  // e.dada是前端页面发送过来的数据
								For 
					Function(){}
					....
								self.postMessage( e.data );
							}

			</p>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a href="case/cache.html" target="case"></a>
			<a href="case/demo1.html" target="case"></a>
			<a href="case/demo2.html" target="case"></a>
			<a href="case/upload.html" target="case"></a>
			<a href="case/worker.html" target="case"></a>
		</nav>
		<iframe name='case' src="homeWork.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		(function(){
			var hTitle = document.getElementById('h-title'),
				otitle = document.querySelector('head title');
			otitle.innerText = hTitle.innerText;
			
			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = decodeURI(oCase[i].href.split('case/')[1]);
			}
		})();
	</script>
</body>
</html>